<!--
 * @Author: deng da chao
 * @Description: 商品3D展示
-->
<template>
	<div class="goods_booth pos_r videoStage pos_r">
		<view class="loading pos_a flex_center" v-if="loading">
			<image mode="widthFix" src="@/static/image/goods_loading.png" alt="" />
		</view>
		<image class="booth_bg" src="@/static/image/buy/goods_showGg.png" mode="widthFix"></image>
		<div class="exhibits_div flex_center flex_column pos_a">
			<model-import class="model_import " :goodsImg="details.detailMainImg"
				@load="loading = false"></model-import>
		</div>
	</div>
</template>
<script>
	import modelImport from "@/components/threePrize/model_import.vue";
	import $fun from "@/utils/functions";
	export default {
		name: "goods_exhibits",
		props: {
			details: {
				type: Object,
				default: () => {}
			},

		},
		data() {
			return {
				loading: true,
			};
		},
		components: {
			modelImport,
		},
		watch: {
			details: {
				handler(value) {

				},
				immediate: true,
				deep: true,
			},
		},
		created() {},
		mounted() {},
		computed: {

		},
		methods: {


		},
	};
</script>
<style scoped lang="scss">
	.goods_booth {
		width: 100vw;
		height: 902rpx;
		// height: 100vh;
		// background: url("@/static/image/buy/goods_showGg.png") no-repeat;
		// background-size: 100% auto;
		// background-position: top center;
		// padding-bottom: 50rpx;
		// background-color: #1a1412;

		&.web_booth {
			background-position: top -90rpx center !important;
		}

		&.videoStage {
			background: transparent !important;
		}

		.loading {
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;

			image {
				width: 140rpx;
			}
		}

		.booth_bg {
			width: 100%;
		}

		.exhibits_div {
			width: 100%;
			height: 100%;
			align-items: flex-start;
			left: 0;
			top: 0;
			right: 0;
			background: transparent !important;

			.model_import {
				width: 100%;
				height: 100%;
				background: transparent !important;
			}
		}
	}
</style>